<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
		<meta name="author" content="Vincent Garreau" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" media="screen" href="sa-frame/login/style.css">
		<link rel="stylesheet" href="static/sa.css">
		<style type="text/css">
			/* 背景图片 */
			#particles-js{
				background-image: url(sa-frame/login/bg.jpg);
			}
			
			/* 样式调整 */
			.login-box{display: flex; justify-content: center; align-items: center; position: fixed; width: inherit; height: 100%; pointer-events: none;}
			.login{height: auto; padding: 50px 50px; position: static; margin: 0 auto !important; pointer-events: all; border-radius: 0px;}
			.login-top{margin-top: 0px; margin-bottom: 30px;}
			.logo-img{width: 50px; height: 50px; vertical-align: middle; position: relative; top: -3px; border-radius: 50%; margin-left: -10px; margin-right: 10px;}
			.logo-img{display: none;}
			.login-button{width: 270px; border-radius: 0px; transition: all 0.2s; display: block; margin: 0 auto;}
			.login-button:hover{background-color: #0E80eF;}
			.register-button{width: 270px; border-radius: 0px; transition: all 0.2s; background-color: #67C23A; color: white; margin: 15px auto 0; cursor: pointer; text-align: center; line-height: 40px; font-size: 16px; height: 40px; box-sizing: border-box; border: none; outline: none; display: block;}
			.register-button:hover{background-color: #5daf34;}
			.captcha-container{display: flex; align-items: center;}
			.captcha-input{flex: 1; margin-right: 10px;}
			.captcha-code{width: 80px; height: 35px; background-color: #f0f0f0; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; user-select: none; font-family: monospace;}
			/* .page-title{line-height: 50px;} */
			.sk-rotating-plane{}
			/* 动画相关 */
			/* .login{background-color: rgba(0,0,0,0); } */
			.login{opacity: 0;}
			
		</style>
	</head>
	<body>

		<div id="particles-js">
			<div class="login-box">
				<div class="login">
					<div class="login-top">
						<img src="" class="logo-img" alt="">
						<span class="page-title">登录</span>
					</div>
					<div class="login-center clearfix">
						<div class="login-center-img"><img src="sa-frame/login/name.png" /></div>
						<div class="login-center-input">
							<input type="text" name="key" value="" placeholder="请输入账号" />
							<div class="login-center-input-text">账号</div>
						</div>
					</div>
					<div class="login-center clearfix">
						<div class="login-center-img"><img src="sa-frame/login/password.png" /></div>
						<div class="login-center-input">
							<input type="password" name="password" value="" placeholder="请输入密码" />
							<div class="login-center-input-text">密码</div>
						</div>
					</div>
					<div class="login-center clearfix">
						<div class="login-center-img"><i class="el-icon-user" style="font-size: 24px; color: #409eff;"></i></div>
						<div class="login-center-input">
							<select name="userRole">
								<option value="consumer">消费者</option>
								<option value="supplier">货主供应商</option>
								<option value="logistics">冷链企业</option>
							</select>
							<div class="login-center-input-text">用户角色</div>
						</div>
					</div>
					<div class="login-button">登录</div>
					<div class="register-button">注册</div>
				</div>
			</div>
			<div class="sk-rotating-plane"></div>
		</div>

		<!-- scripts -->
		<script src="sa-frame/login/particles.min.js"></script>
		<script src="sa-frame/login/app.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="static/sa.js"></script>
		<script type="text/javascript">
			
			// 你所有要改的代码全在这里   ↓↓↓↓↓ 
			
			// 所有参考属性  
			var page_title = '雁农冷链平台';		// 页面标题 
			var key = 'admin';						// 默认的账号
			var password = 'admin';					// 默认的password  
			var logo = 'sa-frame/admin-logo.png';	// logo地址，为空字符串则不显示 
			
			// 生成验证码
			function generateCaptcha() {
				const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				let result = '';
				for (let i = 0; i < 4; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return result;
			}
			
			let currentCaptcha = generateCaptcha();
			
			// 点击注册按钮
			document.querySelector(".register-button").onclick = function() {
				currentCaptcha = generateCaptcha();
				layer.open({
					type: 1,
					title: '用户注册',
					area: ['450px', '520px'],
					content: `
						<div style="padding: 20px;">
							<div style="margin-bottom: 15px;">
								<label style="display: block; margin-bottom: 5px; font-weight: bold;">用户名：</label>
								<input type="text" id="reg-username" placeholder="请输入用户名" style="width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ddd; border-radius: 3px;" />
							</div>
							<div style="margin-bottom: 15px;">
								<label style="display: block; margin-bottom: 5px; font-weight: bold;">密码：</label>
								<input type="password" id="reg-password" placeholder="请输入密码" style="width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ddd; border-radius: 3px;" />
							</div>
							<div style="margin-bottom: 15px;">
								<label style="display: block; margin-bottom: 5px; font-weight: bold;">确认密码：</label>
								<input type="password" id="reg-confirm-password" placeholder="请再次输入密码" style="width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ddd; border-radius: 3px;" />
							</div>
							<div style="margin-bottom: 15px;">
								<label style="display: block; margin-bottom: 5px; font-weight: bold;">用户身份：</label>
								<select id="reg-role" style="width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ddd; border-radius: 3px;">
									<option value="consumer">消费者</option>
									<option value="supplier">供应商</option>
									<option value="logistics">冷链企业</option>
								</select>
							</div>
							<div style="margin-bottom: 20px;">
								<label style="display: block; margin-bottom: 5px; font-weight: bold;">验证码：</label>
								<div class="captcha-container">
									<input type="text" id="reg-captcha" placeholder="请输入验证码" class="captcha-input" style="height: 35px; padding: 0 10px; border: 1px solid #ddd; border-radius: 3px;" />
									<div class="captcha-code" onclick="refreshCaptcha()">${currentCaptcha}</div>
								</div>
								<div style="font-size: 12px; color: #999; margin-top: 5px;">点击验证码可刷新</div>
							</div>
							<div style="text-align: center;">
								<button onclick="doRegister()" style="background-color: #67C23A; color: white; border: none; padding: 10px 30px; border-radius: 3px; cursor: pointer; margin-right: 10px;">注册</button>
								<button onclick="layer.closeAll()" style="background-color: #909399; color: white; border: none; padding: 10px 30px; border-radius: 3px; cursor: pointer;">取消</button>
							</div>
						</div>
					`,
					success: function(layero, index) {
						// 为弹窗内容添加刷新验证码功能
						window.refreshCaptcha = function() {
							currentCaptcha = generateCaptcha();
							$('.captcha-code').text(currentCaptcha);
						}
						
						// 注册功能
						window.doRegister = function() {
							const username = $('#reg-username').val();
							const password = $('#reg-password').val();
							const confirmPassword = $('#reg-confirm-password').val();
							const role = $('#reg-role').val();
							const captcha = $('#reg-captcha').val();
							
							// 表单验证
							if (!username) {
								return layer.msg('请输入用户名');
							}
							if (username.length < 3) {
								return layer.msg('用户名至少3个字符');
							}
							if (!password) {
								return layer.msg('请输入密码');
							}
							if (password.length < 6) {
								return layer.msg('密码至少6个字符');
							}
							if (password !== confirmPassword) {
								return layer.msg('两次输入的密码不一致');
							}
							if (!captcha) {
								return layer.msg('请输入验证码');
							}
							if (captcha.toLowerCase() !== currentCaptcha.toLowerCase()) {
								return layer.msg('验证码错误');
							}
							
							// 模拟注册过程（实际项目中应该请求后台API）
							const roleNames = {
								consumer: '消费者',
								supplier: '供应商',
								logistics: '冷链企业'
							};
							
							// 检查用户名是否已存在（简单的本地存储检查）
							const existingUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
							if (existingUsers.find(user => user.username === username)) {
								return layer.msg('用户名已存在');
							}
							
							// 保存注册信息
							const newUser = {
								username: username,
								password: password,
								role: role,
								roleName: roleNames[role],
								registerTime: new Date().toISOString()
							};
							
							existingUsers.push(newUser);
							localStorage.setItem('registeredUsers', JSON.stringify(existingUsers));
							
							// 保存用户登录信息到localStorage
							localStorage.setItem('userInfo', JSON.stringify({
								username: username,
								userRole: role,
								roleName: roleNames[role]
							}));
							
							layer.msg('注册成功！正在跳转到' + roleNames[role] + '主页...', {icon: 1});
							setTimeout(function() {
								layer.closeAll();
								// 根据角色直接跳转到对应的主页
								switch(role) {
									case 'consumer':
										location.href = "index-consumer.html";
										break;
									case 'supplier':
										location.href = "index-supplier.html";
										break;
									case 'logistics':
										location.href = "index-logistics.html";
										break;
									default:
										location.href = "index.html";
								}
							}, 1500);
						}
					}
				});
			}
			
			// 点击登录按钮 
			document.querySelector(".login-button").onclick = function() {
				// 1、取值 
				var p = {
					key: $('[name=key]').val(),
					password: $('[name=password]').val(),
					userRole: $('[name=userRole]').val()
				}
				// 2、判断
				if(p.key == '' || p.password == ''){
					return layer.msg('请输入账号和密码');
				}
				// 3、模拟登录验证（实际项目中应该请求后台）
				// 检查注册用户登录
				const registeredUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
				const user = registeredUsers.find(u => u.username === p.key && u.password === p.password && u.role === p.userRole);
				
				// 如果不是注册用户，使用默认验证（admin/admin）
				if (!user && (p.key !== 'admin' || p.password !== 'admin')) {
					return layer.msg('用户名或密码错误');
				}
				
				// sa.ajax2('/acc/doLogin', p, function(res) {
					// 简单的角色验证逻辑
					var roleNames = {
						consumer: '消费者',
						supplier: user ? '供应商' : '货主供应商',
						logistics: '冷链企业'
					};
					
					// 保存用户信息到localStorage
					localStorage.setItem('userInfo', JSON.stringify({
						username: p.key,
						userRole: p.userRole,
						roleName: roleNames[p.userRole]
					}));
					
					sa.msg('登录成功，欢迎你：' + roleNames[p.userRole] + ' - ' + p.key);
					setTimeout(function () {
						if(parent == window){
							// 根据角色跳转到不同的页面
							switch(p.userRole) {
								case 'consumer':
									location.href = "index-consumer.html";
									break;
								case 'supplier':
									location.href = "index-supplier.html";
									break;
								case 'logistics':
									location.href = "index-logistics.html";
									break;
								default:
									location.href = "index.html";
							}
						}else{
							sa.closeCurrIframe();
							parent.location.reload();
						}
					}, 500);
				// })
			}
			// 你所有要改的代码全在这里   ↑↑↑↑↑	
			
		</script>
		<script type="text/javascript">
			// 替换属性 
			$('.page-title').html(page_title);
			$('title').html(page_title);
			$('[name=key]').val(key);
			$('[name=password]').val(password);
			if(logo != null && logo != '') {
				$('.logo-img').attr('src', logo);
				$('.logo-img').show();
			}
			// 绑定回车事件
			$('[name=password]').bind('keypress', function(event){
				if(event.keyCode == "13") {
					$('.login-button').click();
				}
			});
			// 去掉透明
			setTimeout(function() {
				// document.querySelector('.login').style.backgroundColor = 'rgba(256,256,256,1)';
				document.querySelector('.login').style.opacity = '1';
			}, 0)
			
			console.log('本页面参考于jq22，原作者：http://www.jq22.com/jquery-info20074');
		</script>
	</body>
</html>
